<template>
  <div class="">
    <h4>京东首页</h4>
    <div class="banner">轮播图模块</div>
    <div class="nav">宫格模块</div>

    <shop :shop="list" />
    <!-- <ul class="con">
      <li v-for="(item, index) in list" :key="index">
        <img :src="item.img" alt="" />
        <h4>{{ item.title }}</h4>
        <p>价格是：{{ item.price }}</p>
      </li>
    </ul> -->
  </div>
</template>

<script>
import shop from "../components/Shop.vue";
export default {
  data() {
    return {
      list: [
        {
          title: "山东菏泽曹县户口666",
          price: "200000000",
          img: "img/01.jpg",
        },
        {
          title: "jk制服裙",
          price: "200",
          img: "img/02.gif",
        },
        {
          title: "鞠婧祎小可爱",
          price: "100",
          img: "img/01.jpg",
        },
        {
          title: "肖战",
          price: "1000000000000000",
          img: "img/01.jpg",
        },
        {
          title: "滨州铁山靠",
          price: "1000000000",
          img: "img/02.gif",
        },
        {
          title: "滨州铁山靠2",
          price: "1000000000",
          img: "img/02.gif",
        },
      ],
    };
  },
  mounted() {},
  methods: {},
  components: {
    shop,
  },
};
</script>

<style lang="scss">
.banner {
  height: 200px;
  background: chocolate;
}
.nav {
  height: 100px;
  background: cornflowerblue;
}
</style>
